<%
/**
 * 分页组件参数配置
 * @param currentPage 当前页码
 * @param totalPages 总页数
 * @param totalItems 总条数
 * @param pageSize 每页条数
 * @param baseUrl 基础URL
 * @param maxVisiblePages 最大显示页码数
 * @param enableInfo 是否启用信息显示
 * @param enableJump 是否启用跳转
 * @param enableLimit 是否启用每页显示条数选择
 * @param searchParams 搜索参数对象，用于保持筛选条件（可选）
 */

// 分页组件参数配置 - 支持直接传递 pagination 对象
const paginationData = pagination || {
    currentPage: currentPage || 1,           // 当前页码
    totalPages: totalPages || 10,            // 总页数
    totalItems: totalItems || 100,           // 总条数
    pageSize: pageSize || 10,        // 每页条数
    baseUrl: baseUrl || '/list',             // 基础URL
    maxVisiblePages: maxVisiblePages || 5    // 最大显示页码数
};

// 搜索参数处理
const queryParams = (typeof searchParams !== 'undefined') ? searchParams : {};

// 构建查询字符串的函数
function buildQueryString(page, excludeParams = []) {
    const params = new URLSearchParams();

    // 添加页码
    if (page) {
        params.append('page', page);
    }

    // 添加其他查询参数，排除指定的参数
    Object.keys(queryParams).forEach(key => {
        if (!excludeParams.includes(key) && queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) {
            params.append(key, queryParams[key]);
        }
    });

    const queryString = params.toString();
    return queryString ? '?' + queryString : '';
}

// 计算显示的页码范围
let startPage = Math.max(1, paginationData.currentPage - Math.floor(paginationData.maxVisiblePages / 2));
let endPage = Math.min(paginationData.totalPages, startPage + paginationData.maxVisiblePages - 1);

// 如果结束页码小于最大显示页码数，调整开始页码
if (endPage - startPage + 1 < paginationData.maxVisiblePages) {
    startPage = Math.max(1, endPage - paginationData.maxVisiblePages + 1);
}

// 生成页码数组
const pageNumbers = [];
for (let i = startPage; i <= endPage; i++) {
    pageNumbers.push(i);
}
%>

<!-- 分页组件容器 -->
<div class="flex flex-col items-center space-y-4 py-6">
    <!-- 分页导航 -->
    <nav class="flex flex-col sm:flex-row sm:items-center sm:justify-center overflow-x-auto w-full px-4 space-y-3 sm:space-y-0 sm:space-x-3" aria-label="分页导航">
        <% if (paginationData.enableInfo) { %>
            <!-- 分页信息 -->
            <div class="text-sm text-gray-600 text-center sm:text-left">
                显示第 <%= (paginationData.currentPage - 1) * paginationData.pageSize + 1 %> 到
                <%= Math.min(paginationData.currentPage * paginationData.pageSize, paginationData.totalItems) %> 条，
                共 <%= paginationData.totalItems %> 条记录
            </div>
        <% } %>

        <div class="flex items-center justify-center space-x-1 min-w-max">
            <!-- 首页按钮 - 移动端隐藏 -->
            <% if (paginationData.currentPage > 1) { %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(1) %>"
                   class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    首页
                </a>
            <% } else { %>
                <span class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-300 bg-gray-50 border border-gray-200 rounded-md cursor-not-allowed">首页</span>
            <% } %>

            <!-- 上一页按钮 -->
            <% if (paginationData.currentPage > 1) { %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(paginationData.currentPage - 1) %>"
                   class="flex items-center justify-center w-10 h-10 sm:w-auto sm:px-3 sm:py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    <i class="fas fa-chevron-left"></i>
                    <span class="hidden sm:inline ml-1">上一页</span>
                </a>
            <% } else { %>
                <span class="flex items-center justify-center w-10 h-10 sm:w-auto sm:px-3 sm:py-2 text-sm font-medium text-gray-300 bg-gray-50 border border-gray-200 rounded-md cursor-not-allowed">
                  <i class="fas fa-chevron-left"></i>
                  <span class="hidden sm:inline ml-1">上一页</span>
                </span>
            <% } %>

            <!-- 页码按钮 -->
            <!-- 显示第一页和省略号 - 移动端简化 -->
            <% if (startPage > 1) { %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(1) %>"
                   class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    1
                </a>
                <% if (startPage > 2) { %>
                    <span class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-400">...</span>
                <% } %>
            <% } %>

            <!-- 显示页码范围 - 移动端只显示3个页码 -->
            <%
            // 移动端显示逻辑：只显示当前页和前后各1页
            let mobileStart = Math.max(1, paginationData.currentPage - 1);
            let mobileEnd = Math.min(paginationData.totalPages, paginationData.currentPage + 1);
            %>

            <!-- 桌面端页码 -->
            <div class="hidden sm:flex items-center space-x-1">
                <% pageNumbers.forEach(page => { %>
                    <% if (page === paginationData.currentPage) { %>
                        <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md cursor-default"><%= page %></span>
                    <% } else { %>
                        <a href="<%= paginationData.baseUrl %><%= buildQueryString(page) %>"
                           class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                            <%= page %>
                        </a>
                    <% } %>
                <% }); %>
            </div>

            <!-- 移动端页码 - 只显示当前页和前后各1页 -->
            <div class="flex sm:hidden items-center space-x-1">
                <% for (let page = mobileStart; page <= mobileEnd; page++) { %>
                    <% if (page === paginationData.currentPage) { %>
                        <span class="flex items-center justify-center w-10 h-10 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md cursor-default"><%= page %></span>
                    <% } else { %>
                        <a href="<%= paginationData.baseUrl %><%= buildQueryString(page) %>"
                           class="flex items-center justify-center w-10 h-10 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                            <%= page %>
                        </a>
                    <% } %>
                <% } %>
            </div>

            <!-- 显示省略号和最后一页 - 移动端隐藏 -->
            <% if (endPage < paginationData.totalPages) { %>
                <% if (endPage < paginationData.totalPages - 1) { %>
                    <span class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-400">...</span>
                <% } %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(paginationData.totalPages) %>"
                   class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    <%= paginationData.totalPages %>
                </a>
            <% } %>

            <!-- 下一页按钮 -->
            <% if (paginationData.currentPage < paginationData.totalPages) { %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(paginationData.currentPage + 1) %>"
                   class="flex items-center justify-center w-10 h-10 sm:w-auto sm:px-3 sm:py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    <span class="hidden sm:inline mr-1">下一页</span>
                    <i class="fas fa-chevron-right"></i>
                </a>
            <% } else { %>
                <span class="flex items-center justify-center w-10 h-10 sm:w-auto sm:px-3 sm:py-2 text-sm font-medium text-gray-300 bg-gray-50 border border-gray-200 rounded-md cursor-not-allowed">
                  <span class="hidden sm:inline mr-1">下一页</span>
                  <i class="fas fa-chevron-right"></i>
                </span>
            <% } %>

            <!-- 末页按钮 - 移动端隐藏 -->
            <% if (paginationData.currentPage < paginationData.totalPages) { %>
                <a href="<%= paginationData.baseUrl %><%= buildQueryString(paginationData.totalPages) %>"
                   class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:outline-none transition-colors duration-200">
                    末页
                </a>
            <% } else { %>
                <span class="hidden sm:block px-3 py-2 text-sm font-medium text-gray-300 bg-gray-50 border border-gray-200 rounded-md cursor-not-allowed">末页</span>
            <% } %>
        </div>
    </nav>

    <% if (paginationData.enableJump) { %>
        <!-- 快速跳转 -->
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">跳转到第</span>
            <form method="GET" action="<%= paginationData.baseUrl %>" class="flex items-center space-x-2">
                <!-- 保持所有筛选条件 -->
                <% Object.keys(queryParams).forEach(key => { %>
                    <% if (key !== 'page' && queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) { %>
                        <input type="hidden" name="<%= key %>" value="<%= queryParams[key] %>">
                    <% } %>
                <% }); %>

                <input type="number"
                       name="page"
                       min="1"
                       max="<%= paginationData.totalPages %>"
                       placeholder="<%= paginationData.currentPage %>"
                       class="w-16 px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <button type="submit"
                        class="px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none transition-colors duration-200">
                    跳转
                </button>
            </form>
            <span class="text-sm text-gray-600">页</span>
        </div>
    <% } %>

    <% if (paginationData.enableLimit) { %>
        <!-- 每页显示条数选择器 -->
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-600">每页显示</span>
            <form method="GET" action="<%= paginationData.baseUrl %>" class="flex items-center space-x-2">
                <!-- 保持所有筛选条件，但排除 page 和 limit -->
                <% Object.keys(queryParams).forEach(key => { %>
                    <% if (key !== 'page' && key !== 'limit' && queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) { %>
                        <input type="hidden" name="<%= key %>" value="<%= queryParams[key] %>">
                    <% } %>
                <% }); %>

                <select name="limit"
                        onchange="this.form.submit()"
                        class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="5" <%= paginationData.pageSize === 5 ? 'selected' : '' %>>5</option>
                    <option value="10" <%= paginationData.pageSize === 10 ? 'selected' : '' %>>10</option>
                    <option value="20" <%= paginationData.pageSize === 20 ? 'selected' : '' %>>20</option>
                    <option value="50" <%= paginationData.pageSize === 50 ? 'selected' : '' %>>50</option>
                    <option value="100" <%= paginationData.pageSize === 100 ? 'selected' : '' %>>100</option>
                </select>
                <input type="hidden" name="page" value="1">
            </form>
            <span class="text-sm text-gray-600">条</span>
        </div>
    <% } %>
</div>